<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>todos</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="../../vue.js"></script>
</head>

<body>
    <section class="todoapp">
        <div>
            <header class="header" >
                <h1>todos</h1>
                <input class="new-todo" 
                    v-model="todoVal" 
                    @keyup.enter="add" 
                    placeholder="请输入内容"
                />
            </header>
            <section class="main">
                <input class="toggle-all" 
                    v-model="isCheckedAll" 
                    type="checkbox" 
                />
                <ul class="todo-list">
                    <li 
                        v-for="item,index in filterList" 
                        :class="{'editing':editTodoIndex === index,'completed':item.check}">
                        <div class="view" v-show="editTodoIndex !== index">
                            <input class="toggle" v-model="item.check" type="checkbox" />
                            <label @dblclick="editTodo(index)">{{item.title}}</label>
                            <button class="destroy" @click="remove(index)"></button>
                        </div>
                        <input class="edit" 
                            ref='edit' 
                            @keyup.esc="editCancel(item)" 
                            @blur="save(item)" 
                            @keyup.13="save(item)" 
                            v-model="item.title" />
                    </li>
                </ul>
            </section>
            <footer class="footer" v-show="list.length">
	            <span class="todo-count">
	            	<strong>{{uncheckedLen}}</strong>
	            	<span>条未选中</span>
	            </span>
	            <ul class="filters">
	            	<li><a href="#/all" :class="{selected:hash === 'all'}">All</a></li> 
	            	<li><a href="#/active" :class="{selected:hash === 'active'}">Active</a></li> 
	            	<li><a href="#/completed" :class="{selected:hash === 'completed'}">Completed</a></li>
	           	</ul>
            </footer>
        </div>
    </section>
</body>
<script>
    let data = JSON.parse(localStorage.getItem('item-value')) || [];

    let filterActive = {
        all(list){
            return list
        },
        active(list){
            return list.filter(item => !item.check)
        },
        completed(list){
            return list.filter(item => item.check)
        }
    }
    
    let vm = new Vue({
        el:".todoapp",
        data:{
            todoVal:'',
            list:data,
            editTodoIndex: -1,
            beforeTitle:'',
            hash:'all'
        },
        watch:{
            list:{
                handler(){
                    localStorage.setItem('item-value',JSON.stringify(this.list));
                },
                deep:true,
            }
        },
        computed: {
            isCheckedAll: {
                get(){
                    return this.list.every(item => item.check)
                },
                set(newValue){
                    this.list.forEach(item => item.check = newValue)
                }
            },
            uncheckedLen(){
                return this.list.filter(item => !item.check).length;
            },
            filterList(){
                return filterActive[this.hash](this.list);
            }
        },
        methods:{
            add(){
                this.list.push({
                    title:this.todoVal,
                    check:false,
                    edit:false
                })
                this.todoVal = '';
            },
            save(item){
                if(!item.title.trim()){
                    let itemIndex = this.list.findIndex(option => option === item)
                    this.remove(itemIndex);
                }
                this.editTodoIndex = -1;
                this.beforeTitle = '';
            },
            remove(id){
                this.list.splice(id,1);
            },
            editTodo(id){
                this.editTodoIndex = id;
                this.$nextTick( () => {
                    this.$refs.edit[id].focus()   
                })
                this.beforeTitle = this.list[id].title;
            },
            editCancel (item) {
                this.editTodoIndex = -1;
                item.title = this.beforeTitle;
            }
        }
    })

        // 当hash值改变时触发的事件
    window.onhashchange = function (){
        let hashVal = window.location.hash;
        if(hashVal){
            hashVal = hashVal.slice(2);
            hashVal = filterActive[hashVal] ? hashVal : 'all'
        }else{
            hashVal = 'all';
        }   
        // 改变实例下的过滤条件
       vm.hash = hashVal;
    }
    window.onhashchange();
	/*
		1. 增删改查数据，要使用localStorage做数据持久化
		2. 根据hash不同，过滤渲染的数据
			a. 全部任务
			b. 完成的任务
			c. 未完成的任务
		3. 自己设计数据结构
			
	*/
</script>

</html>
